<template>
    <div class="bg-white mt-[10px]">
        <BaseHead> 论文信息</BaseHead>
        <div class="p-[10px] w-10/12 mx-auto">
            <el-descriptions title="" :column="2" border label-width="140">
                <el-descriptions-item label-class-name="gdlable" label="名称">{{
                xmInfo.name
            }}</el-descriptions-item>
                <el-descriptions-item label-class-name="gdlable" label="发表/出版时间">{{
                    xmInfo.publishDate
                }}</el-descriptions-item>
                <el-descriptions-item label-class-name="gdlable" label="所有作者"> <span type="primary"
                        v-for="(item, index) in xmInfo.authorList" :key="item.paperId">{{ item.authorName
                        }}<span v-if="index + 1 != xmInfo.authorList.length">,</span></span></el-descriptions-item>
                <el-descriptions-item label-class-name="gdlable" label="发表/刊物论文集">{{
                xmInfo.magazineName
            }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
    <div class="bg-white mt-[10px]">
        <BaseHead> 补录信息 <template v-slot:Rslot>
                <el-button @click="addPaperInclude">添加</el-button>
            </template></BaseHead>
        <div class="p-[10px] w-10/12 mx-auto">
            <!-- <el-table :data="slTable" border style="width: 100%">
                <el-table-column prop="embodyTypeId" label="收录类型" :formatter="formatterembodyTypeId" />
                <el-table-column prop="embodyDate" label="收录日期" />
                <el-table-column prop="factor" label="影响因子" />
                <el-table-column prop="sciPartition" label="大类分区"> <template #default="scope">
                        {{ scope.row.sciPartition == '1' ? '一区'
                : scope.row.sciPartition == '2' ? '二区'
                    : scope.row.sciPartition == '3' ? '三区'
                        : '四区' }}
                    </template></el-table-column>
                <el-table-column prop="feeAuthorize" label="收录证明附件">
                    <template #default="scope">
                        <div v-for="item in scope.row.fileList" :key="item.id">{{ item.fileName
                            }}<el-link type="primary" style="margin-left: 8px;"
                                @click="downloadMet(item.id)">下载</el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table> -->
        </div>
    </div>
    <el-dialog v-model="dialogVisible" append-to-body width="70%" top="25vh" :close-on-click-modal="false" align-center
        :show-close="false" class="slDig" :before-close="handleClose" destroy-on-close draggable>
        <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
                <div>论文补录{{ slForm.id ? '编辑' : '新增' }}</div>
                <el-icon class="el-icon--left cursor-pointer" @click="close">
                    <CircleCloseFilled color="#fff" />
                </el-icon>
            </div>
        </template>
        <div class="pt-[30px] pb-[20px] bg-white">
            <el-form :model="slForm" :rules="rules" label-width="130px" ref="slFormRef">
                <el-form-item label="论文名称">
                    {{ xmInfo.name }}
                </el-form-item>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="收录类型" prop="embodyTypeId">
                            <el-radio-group v-model="slForm.embodyTypeId">
                                <el-radio v-for="item in lbList" :key="item.code" :label="item.name"
                                    :disabled="disabledList.includes(item.code)" :value="item.code" />
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="收录日期" prop="embodyDate">
                            <el-date-picker v-model="slForm.embodyDate" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="slForm.embodyTypeId == '300601'">
                    <el-col :span="16">
                        <el-form-item label="大类分区">
                            <el-select v-model="slForm.sciPartition" clearable>
                                <el-option label="一区" value="1" />
                                <el-option label="二区" value="2" />
                                <el-option label="三区" value="3" />
                                <el-option label="四区" value="4" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="影响因子">
                            <el-input v-model="slForm.factor" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="收录证明附件">
                    <FileUpload :uploadUrl="uploadUrl" :limit="1" tip="最多可上传1个附件,每个附件大小不超过20M" v-model="fileList"
                        @change="fileChange">
                    </FileUpload>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <div class="operate-btns">
                    <el-button type="primary" @click="save">确定</el-button>
                    <el-button type="primary" @click="closeDiglog">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import FileUpload from "@/views/achievement/components/FileUpload.vue"
import { getpaperInfo, getpaperEmbodyAdd, getpaperEmbodyInfo, getlevelList } from "@/api/achievement/kycg"
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
    productId: String,
})
const xmInfo = ref({})
const slTable = ref([])
const dialogVisible = ref(false)
const slForm = ref({
    embodyDate: '',
    embodyFileId: '',
    embodyTypeId: '',
    paperId: '',
    factor: '',
    sciPartition: '',
})
const rules = ref({
    embodyDate: [{
        required: true,
        message: '请选择收录日期',
        trigger: 'change',
    },],
    embodyTypeId: [{
        required: true,
        message: '请选择收录类型',
        trigger: 'change',
    },]

})
const viewXm = () => {
    slForm.value.paperId = props.productId
    getpaperInfo(props.productId).then((res) => {
        if (res.code == 200) {
            xmInfo.value = res.data
        }
    })
    // getslTable()
};
const disabledList = ref([])
const getslTable = () => {
    getpaperEmbodyInfo(props.productId).then((res) => {
        if (res.code == 200) {
            slTable.value = res.data
            console.log(slTable.value)
            disabledList.value = res.data.map(item => item.id)
            console.log(disabledList.value, 'disabledList.value')


        }
    })
}
const addPaperInclude = () => {
    dialogVisible.value = true

}
const handleClose = (done) => {
    closeDiglog()
    done()
}
const formatterembodyTypeId = (row, column, cellValue, index) => {
    if (lbList.value.length && cellValue) {
        if (lbList.value.find(item => item.code == cellValue)) {
            return lbList.value.find(item => item.code == cellValue).name
        } else {
            return ''
        }

    } else {
        return ''
    }
}
const uploadUrl = `/commonFile/uploadFile?modelName=paperIncludeApply`;
const fileList = ref([]);
//上传的文件改变
const fileChange = () => {
    const ids = fileList.value.map((item) => {
        const id = item.response ? item.response.data : item.id;
        return id;
    });
    slForm.value.embodyFileId = ids.join(",");
};
const lbList = ref([])

const getslList = async () => {
    let parms = {
        pageNum: 1,
        pageSize: 100
    }
    let res = await getlevelList(parms)
    if (res.code == 200) {
        lbList.value = res.rows.filter(item => {
            return item.isEmbody == '1'
        })
    }
}
const closeDiglog = () => {
    dialogVisible.value = false
    fileList.value = []
    slForm.value = {
        embodyDate: '',
        embodyFileId: '',
        embodyTypeId: '',
        paperId: '',
        factor: '',
        sciPartition: '',
    }
    slForm.value.paperId = props.productId
}
const slFormRef = ref(null)
const save = async () => {
    if (!slFormRef.value) return
    await slFormRef.value.validate((valid, fields) => {
        if (valid) {
            let params = {
                ...slForm.value,
            }
            getpaperEmbodyAdd(params).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    // getslTable()
                    closeDiglog()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}


getslList()
viewXm()
</script>
<style scoped lang="scss">
@import url("@/views/achievement/index.scss");
</style>
<style lang="scss">
.slDig {
    padding: 0;
    background-color: #f0f2f5;
    height: 70vh !important;
    overflow-y: hidden;
    margin-top: 25vh !important;

    .el-dialog__body {
        height: 82%;
        overflow: auto;
        padding-bottom: 55px;
    }

}

.slDig:not(.is-fullscreen) {
    margin-top: 15vh !important;
}
</style>